<template>
  <div class="login-container">
    <div class="login login-shadow" style="display: block; margin-top: -324.5px;" >
      <div class="title">
        <h4>登录界面</h4>
      </div>
      <div class="content">
        <el-form ref="LoginDatas" :model="LoginDatas" class="login-form" :rules="rules">
          <div class="common-form">
            <el-row class="username">
              <el-form-item class="input invalid" style="opacity: 1" prop="username">
                <span class="icon icon-user"></span>
                  <el-input v-model="LoginDatas.userName" class="el-input__inner1" type="text" placeholder="手机号"/>
              </el-form-item>
            </el-row>
            <el-row class="password">
              <el-form-item class="input invalid" prop="password">
                <span class="icon icon-password"></span>
                  <el-input v-model="LoginDatas.password" class="el-input__inner1" type="text" placeholder="密码"/>
              </el-form-item>
            </el-row>
            <el-row class="remember">
              <el-form-item>
              <router-link to="/forgotenpassword"><a class="forgotpassword">忘记密码？</a></router-link>
              <router-link to="/register"><a>注册UX ID</a></router-link>
              <router-link to="/admin"><a class="register">管理员登录</a></router-link>
              </el-form-item>
            </el-row>
          </div>
          <!--<div class="btn-wrapper">-->
          <el-form-item>
              <el-button :loading="loading" @click="handleUserLogin(LoginDatas)" type="primary" size="middle" style="margin-left: 130px">个人登录</el-button>
          <!--  </div>-->
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import ElRow from 'element-ui/packages/row/src/row';
  import { setCookie, getCookie } from '../../assets/js/cookie';

  const initForm = {
    userName: '',
    password: ''
  };
  export default {
    name: 'Login',
    components: { ElRow },
    data() {
      return {
        loading: false,
        username: '',
        password: '',
        LoginDatas: Object.assign({}, initForm),
        rules: {
          userName: [{required: true, message: '请输入手机号码', trigger: 'blur'},
            {
              validator: function (rule, value, callback) {
                if (/^1[34578]\d{9}$/.test(value) == false) {
                  callback(new Error("请输入正确的手机号"));
                } else {
                  callback();
                }
              }, trigger: 'blur'
            }],
          password: [{required: true, message: '请输入密码', trigger: 'blur'},
            {min: 5, max: 25, message: '长度在 5 到 25个字符'},
            {pattern: /^(\w){5,25}$/, message: '只能输入5-25个字母、数字、下划线'}]
        }
      }
    },
    mounted(){
      /*页面挂载获取cookie，如果存在username的cookie，则跳转到主页，不需登录*/
      if(getCookie('userName')){
        this.$router.push('/')
      }
    },
    methods: {
      handleUserLogin() {
        console.log(22);
        this.$refs.LoginDatas.validate(valid => {
          this.loading = true;
          if(valid) {
            console.log(33)
            let data = {'userName':this.LoginDatas.userName,'password':this.LoginDatas.password}
            var url = this.HOME + '/login/userlogin';
            this.$axios.post(url,data).then((res)=>{
              console.log(res);
            if(res.data.judge.success == false){
              this.$message.warning('用户名或密码错误')
              this.loading = false;
            } else {
              setCookie('userName',this.LoginDatas.userName,1000*60)
              this.$message.success('登录成功!!!')
              setTimeout(function () {
                this.$router.push('/')
              }.bind(this),1000)
            }
          })
          }
        })
      }
    }
  }
</script>

<style scoped>
  div {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
.login-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-size: 100px;
  background-repeat: repeat;
  min-height: 800px;
  min-width: 630px;
  background: url("../../assets/img/icon-login/login-background.png") ;
  z-index: 999;
}
  .login {
    width: 450px;
    border: 1px solid #dadada;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    background: linear-gradient(#fff,#f5f5f5);
    margin-left: -225px;
    position: absolute;
    box-shadow: 0 9px 30px -6px rgba(0,0,0,.2), 0 18px 20px -10px rgba(0,0,0,.04), 0 18px 20px -10px rgba(0,0,0,.04), 0 10px 20px -10px rgba(0,0,0,.04);
  }

  .input {
    border: 1px solid #d0d0d0;
    border-radius: 10px;
  }
  .input .icon {
    background: -webkit-linear-gradient(#f8f8f8,#fafafa);
    background: -moz-linear-gradient(#f8f8f8,#fafafa);
    background: -ms-linear-gradient(#f8f8f8,#fafafa);
    background: -o-linear-gradient(#f8f8f8,#fafafa);
    border-radius: 6px 0 0 6px;
    border-right: solid 1px #ccc;
    box-shadow: 1px 0 3px -1px rgba(0,0,0,.1);
    float: left;
    height: 36px;
    width: 36px;
    overflow: hidden;
  }
  el-input {
    height: 36px;
    font-size: 14px;
    font-weight: 700;
    margin-left: 40px;
    color: #333;
    border: none;
    outline: none;
  }
  .title {
    position: relative;
    background-image: url("../../assets/img/global-logo11.jpg");
    background-size: 80px;
    background-position: top center;
    background-repeat: no-repeat;
    height: 92px;
    margin: 30px 0 50px;
    padding: 80px 0 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  .login-container .login  .title h4 {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    border-bottom: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    line-height: 1em;
    height: auto;
    color: #333;
    font-size: 30px;
    font-weight: 400;
  }
  .content {
    padding: 0 40px 22px;
  }
  .login-form {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  .common-form li {
    clear: both;
    margin-bottom: 15px;
    position: relative;
  }
  .icon-user {
    border: none;
    /*padding: 15px 20px 20px 15px;*/
    background-repeat: no-repeat;
    cursor: pointer;
    background-size: contain;
    background-color: transparent;
    background-image: url("../../assets/img/icon-login/user.png");
  }
  .icon-password {
    border: none;
    /*padding: 15px 20px 20px 15px;*/
    background-repeat: no-repeat;
    cursor: pointer;
    background-size: contain;
    background-color: transparent;
    background-image: url("../../assets/img/icon-login/lock.png");
  }
  .input.invalid {
    border-color: #d16d62!important;
    opacity: 1!important;
  }
  .password {
    margin-top: 20px;
  }
  .remember {
    margin: 15px 5px 25px;
  }
  .remember .forgotpassword {
    float: right;
    margin-right: 3px;
  }
  .remember .register {
    display: inline-block;
    float: left;
    font-size: 12px;
    margin-left: 132px;
    margin-left: 130px \9 \0;
    margin-right: 8px;
  }
  a {
    color: #5079d9;
    cursor: pointer;
    text-decoration: none;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
  }
  btn-wrapper {
    margin: 30px 0 0;
    clear: both;
  }
  .btn.disabled {
    cursor: not-allowed;
    opacity: .4;
    pointer-events: none;
  }
  .btn-primary {
    background: #6383c6;
    background: linear-gradient(#6383c6,#4262af);
  }
  .btn {
    border-radius: 6px;
    clear: both;
    cursor: pointer;
    height: 46px;
    line-height: 46px;
    margin: 0 0 12px;
    padding: 1px;
    -webkit-touch-callout: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    text-align: center;
    text-shadow: rgba(255,255,255,.496094) 0 1px 0;
  }
  .el-input {
    width: 325px;
  }
</style>
